<template>
  <Layout>
    <page-header :title="title"></page-header>
    <div class="row">
      <div class="col-xl-8">
        <Stat />
        <div class="card card-body" style="margin-top: 0px">
          <!-- Column with Data Labels -->
          <h4
            class="card-title mb-4"
            style="font-size: 17px; margin-bottom: 0px !important"
          >
            24小时数据增量走势变化
          </h4>
          <apexchart
            class="apex-charts"
            height="350"
            type="bar"
            dir="ltr"
            :series="columnDatalabelChart.series"
            :options="columnDatalabelChart.chartOptions"
          ></apexchart>
        </div>
      </div>
      <div class="col-xl-4">
        <RecentActivity type="2" />
      </div>
    </div>
    <div class="card col-12 seedbody card-body">
      <div class="all-products" style="margin-top: 0">全部信息</div>
      <div class="states-type">
        <span class="type-title">全部类型:</span>
        <button
          type="button"
          class="btn btn-light rounded-pill btn-sm states-type-item"
          :class="{ isActive: siteChange == item.index }"
          v-for="item in allSite"
          :key="item.index"
          @click="allSites(item)"
        >
          {{ item.name }}
        </button>
        <!-- <b-badge
          variant="light"
          class="states-type-item"
          :class="{ isActive: siteChange == item.index }"
          v-for="item in allSite"
          :key="item.index"
          @click="allSites(item)"
        >
          {{ item.name }}</b-badge
        > -->
      </div>
      <div class="states-time">
        <div class="ad">
          <b-button variant="danger" style="margin-right: 20px" size="sm">
            <i class="ri-close-line align-middle mr-1"></i> 批量删除
          </b-button>
          <b-button variant="primary" size="sm" @click="addSeed">
            <i class="ri-add-line align-middle mr-1"></i>添加信源
          </b-button>
        </div>
        <div>
          <span class="time-title">全部状态:</span>
          <!-- <b-badge
            variant="light"
            class="states-time-item"
            v-for="item in states"
            :class="{ isActive: stateChange == item.index }"
            :key="item.index"
            @click="statesItem(item)"
            >{{ item.type }}</b-badge
          > -->

          <button
            type="button"
            class="btn btn-light rounded-pill btn-sm states-time-item"
            :class="{ isActive: stateChange == item.index }"
            v-for="item in states"
            :key="item.index"
            @click="statesItem(item)"
          >
            {{ item.type }}
          </button>
        </div>
      </div>
    </div>
    <Transaction />
  </Layout>
</template>

<script>
import Layout from "../../../layouts/main";
import PageHeader from "@/components/page-header";
import Stat from "./widget";
import RecentActivity from "./recent-activity";
import Transaction from "../transaction";
import { columnDatalabelChart } from "./data-apex";

export default {
  components: {
    Layout,
    PageHeader,
    Stat,
    RecentActivity,
    Transaction,
  },
  data() {
    return {
      title: "信源管理",
      columnDatalabelChart: columnDatalabelChart,
      // 站点筛选
      allSite: [
        {
          name: "全部 (85,021)",
          index: 1,
        },
        {
          name: " 资讯信源 (26,216)",
          index: 2,
        },
        {
          name: "招标信源 (29,110)",
          index: 3,
        },
        {
          name: "政策信源 (7,876)",
          index: 4,
        },
        {
          name: "工商信源 (6)",
          index: 5,
        },
        {
          name: "证券 (3)",
          index: 6,
        },
      ],
      siteChange: 1,
      //类型筛选
      states: [
        {
          type: "全部",
          index: 1,
        },
        {
          type: "正常",
          index: 2,
        },
        {
          type: "异常",
          index: 3,
        },
        {
          type: "停止",
          index: 4,
        },
      ],
      stateChange: 1,
    };
  },
  methods: {
    // 跳转添加信源
    addSeed() {
      this.$router.push({
        name: "AddSeed",
      });
    },
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
    },
    //类型筛选
    statesItem(item) {
      this.stateChange = item.index;
    },
  },
};
</script>
<style lang="scss" scoped>
.seedTitle {
  font-size: 15px;
  color: #000000;
  font-weight: 600;
}
input,
.multiselect {
  width: 350px;
  height: 40px;
}
input {
  // border: 1px solid #ced4da !important;
  outline: none;
  border-radius: 5px;
}
.duoxuan {
  display: flex;
  justify-content: space-between;
}
.tijiao {
  width: 200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.form-group {
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  margin-right: 10px;
  input {
    &:nth-child(2) {
      float: right;
    }
  }
  .basic-title,
  .extend-title {
    display: inline-block;
    border-bottom: 1px solid #bbb;
    font-size: 16px;
  }
}
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.seedfrist {
  margin-top: 0px !important;
}
.seedbody {
  margin-bottom: 0px;
  margin-top: 0px !important;
}
// 走势图
.sparklines {
  margin-top: 20px;
  font-size: 17px;
  color: #343a40;
}
.count {
  .title {
    font-size: 15px;
    font-weight: bold;
  }
  .zhankai {
    float: right;
    img {
      vertical-align: middle;
      width: 20px;
      padding-right: 10px;
    }
  }
}
.all-products {
  font-size: 15px;
  font-weight: bold;
  margin-top: 20px;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-type-item {
    font-size: 12px;
    margin: 0 10px;
    padding-left: 8px;
    padding-right: 8px;
    width: 116px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 20px;
  .ad {
    float: right;
  }
  .time-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  
  }
  .states-time-item {
    font-size: 12px;
    margin: 0 10px;
    padding-left: 16px;
    padding-right: 16px;
        width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.card-body {
  margin-top: 20px;
}
</style>